{% extends "base.html" %}

{% block title %}文档中心 - Ruiyun Cloud{% endblock %}

{% block content %}
<div class="docs-page">
    <!-- Sidebar with Categories -->
    {% if categories %}
    <aside class="docs-sidebar">
        <h3>📂 分类目录</h3>
        <ul class="category-list">
            <li>
                <a href="{{ url_for('public.index') }}" class="category-link {% if not current_category %}active{% endif %}">
                    📚 全部文档
                </a>
            </li>
            {% for category in categories %}
            <li>
                <a href="{{ url_for('public.index', category=category) }}"
                   class="category-link {% if current_category == category %}active{% endif %}">
                    📁 {{ category }}
                </a>
            </li>
            {% endfor %}
        </ul>
    </aside>
    {% endif %}

    <!-- Main Content -->
    <div class="docs-main {% if not categories %}full-width{% endif %}">
        <div class="page-header">
            <h1>📚 文档中心</h1>
            {% if current_category %}
            <p class="subtitle">分类：{{ current_category }} <a href="{{ url_for('public.index') }}" class="clear-filter">✕ 清除筛选</a></p>
            {% else %}
            <p class="subtitle">浏览所有软件文档</p>
            {% endif %}
        </div>

        {% if documents %}
        <div class="docs-list">
            {% for doc in documents %}
            <div class="doc-list-item {% if doc.is_locked %}locked{% endif %}">
                <div class="doc-list-header">
                    <span class="doc-format format-{{ doc.format }}">{{ doc.format }}</span>
                    <h2 class="doc-list-title">
                        <a href="{{ url_for('public.view_document', id=doc.id) }}">
                            {% if doc.is_locked and not is_admin %}<span class="lock-icon">🔒</span>{% endif %}
                            {{ doc.title }}
                        </a>
                    </h2>
                    {% if doc.category %}
                    <span class="doc-category">{{ doc.category }}</span>
                    {% endif %}
                </div>
                <p class="doc-list-preview">
                    {% set preview = doc.content|replace('#', '')|replace('*', '')|replace('`', '')|replace('>', '')|replace('-', '')|replace('_', '')|trim %}
                    {{ preview[:150] }}{% if preview|length > 150 %}...{% endif %}
                </p>
                <div class="doc-list-meta">
                    <span class="doc-date">
                        📅 {{ doc.created_at.strftime('%Y-%m-%d') }}
                    </span>
                    <a href="{{ url_for('public.view_document', id=doc.id) }}" class="btn btn-outline btn-sm">
                        {% if doc.is_locked and not is_admin %}需要登录 →{% else %}查看 →{% endif %}
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <div class="empty-icon">📄</div>
            <h2>暂无文档</h2>
            <p>{% if current_category %}该分类下还没有文档。{% else %}目前还没有发布任何文档。{% endif %}</p>
            {% if session.get('admin_id') %}
            <a href="{{ url_for('admin.create') }}" class="btn btn-primary">创建第一篇文档</a>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .docs-page {
        display: flex;
        gap: 2rem;
        max-width: 1600px;
        margin: 0 auto;
    }

    .docs-sidebar {
        width: 250px;
        flex-shrink: 0;
        background: white;
        border-radius: 10px;
        padding: 1.5rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        height: fit-content;
        position: sticky;
        top: 90px;
    }

    .docs-sidebar h3 {
        margin-bottom: 1rem;
        font-size: 1.1rem;
        color: #333;
    }

    .category-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .category-list li {
        margin-bottom: 0.5rem;
    }

    .category-link {
        display: block;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        text-decoration: none;
        color: #666;
        transition: all 0.3s;
    }

    .category-link:hover {
        background: #f8f9fa;
        color: #667eea;
        transform: translateX(5px);
    }

    .category-link.active {
        background: #667eea;
        color: white;
    }

    .docs-main {
        flex: 1;
        min-width: 0;
    }

    .docs-main.full-width {
        max-width: 1400px;
        margin: 0 auto;
    }

    .clear-filter {
        color: #667eea;
        text-decoration: none;
        margin-left: 0.5rem;
        font-size: 0.9rem;
    }

    .clear-filter:hover {
        text-decoration: underline;
    }

    .doc-category {
        padding: 0.25rem 0.75rem;
        background: #e3f2fd;
        color: #1976d2;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .lock-icon {
        color: #f39c12;
        margin-right: 0.5rem;
    }

    .doc-list-item.locked {
        opacity: 0.85;
    }

    .doc-list-item.locked .doc-list-title a {
        color: #856404;
    }

    @media (max-width: 968px) {
        .docs-page {
            flex-direction: column;
        }

        .docs-sidebar {
            width: 100%;
            position: static;
        }

        .category-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .category-list li {
            margin-bottom: 0;
        }

        .category-link:hover {
            transform: none;
        }
    }
</style>
{% endblock %}
